<template>
	<div class="md-btns" :style="{marginTop: value.margin + 'px', padding: value.paddingy + 'px ' + value.paddingx + 'px', backgroundColor: value.bgcolor}">
		<template v-if="value.showType == 0">
			<div class="md-btns-cell" v-for="item in value.lists" :class="'cell-' + value.showNumber">
				<div class="image"><img :src="item.image || defaultImage" /></div>
				<p class="title">{{item.title || '标题'}}</p>
			</div>
		</template>
		<template v-else>
			<div class="md-btns-cell" v-for="item in value.lists.slice(0, value.showNumber)" :class="'cell-' + value.showNumber">
				<div class="image"><img :src="item.image || defaultImage" /></div>
				<p class="title">{{item.title || '标题'}}</p>
			</div>
			<div class="md-btns-thumb">
				<span v-for="(item, index) in value.lists" v-show="(index % value.showNumber == 0)" :class="{'active': index == 0}"></span>
			</div>
		</template>
	</div>
</template>

<script>
import desrc from '../../../../assets/default.png';
export default {
	name: 'btnsContent',
	props: {
		value: Object
	},
	data() {
		return {
			defaultImage: desrc
		}
	}
}
</script>

<style>
</style>